<template>
  <div class="vue-box" style="display: none;" :style="'display: block;'">
    <div class="c-panel">
      <!-- ------------- 检索参数 ------------- -->
      <div class="c-title">公告管理</div>
      <!-- ------------- 快捷按钮 ------------- -->
      <div class="fast-btn">
        <el-button type="primary" icon="el-icon-plus" @click="add">
          发布新公告
        </el-button>
        <div class="c-item">
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="p.name"
              clearable>
          </el-input>
        </div>
      </div>
      <el-table
          :border="true"
          resizable
          ref="userTable"
          :data="tableData"
          style="width: 100%"
          highlight-current-row
          max-height="450">
        <el-table-column type="selection" width="40" align="center"></el-table-column>
        <el-table-column
            prop="title"
            min-width="50"
            label="公告标题">
        </el-table-column>
        <el-table-column
            prop="createTime"
            min-width="80"
            label="创建时间">
        </el-table-column>
        <el-table-column
            min-width="60"
            label="公告状态">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.type === 'todo'">草稿</el-tag>
            <el-tag type="success" v-if="scope.row.type === 'release'">已发布</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="createByName"
            min-width="60"
            label="发布者">
        </el-table-column>
        <el-table-column
            fixed="right"
            min-width="160"
            label="操作">
          <template slot-scope="scope">

            <el-button v-if="scope.row.type === 'todo'" type="text" @click.native.prevent="release(scope.row.id)">发布
            </el-button>

            <el-button type="text" @click.native.prevent="show(scope.row)">查看</el-button>

            <el-button
                @click.native.prevent="edit(scope.row)"
                v-if="scope.row.type === 'todo'"
                type="text">编辑
            </el-button>
            <el-popconfirm
                title="确认移除？移除后无法恢复！！"
                @confirm="del(scope.row.id)"
            >
              <el-button
                  slot="reference"
                  type="text">删除
              </el-button>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination background
                       layout="total, prev, pager, next, sizes, jumper"
                       :current-page.sync="p.current"
                       :page-size.sync="p.size"
                       :total="p.total"
                       :page-sizes="[10, 20, 30, 40, 50, 100]"
                       @current-change="f5()"
                       @size-change="f5()">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
let PATH = "/notice"
module.exports = {
  components: {},
  watch: {
    'p.name': function (val) {
      this.f5()
    }
  },
  data() {
    return {
      tableData: [],
      p: {
        name: '',
        current: 1,
        size: 10,
        total: -1
      },
    }
  },
  methods: {
    add() {
      let viewId = 'notice-add';
      sa_admin.showMenuById(viewId);
    },
    edit(row) {
      let viewId = 'notice-add';
      sa_admin.showMenuById(viewId);
      setTimeout(() => {
        let app = sa_admin.getTabWindow(viewId)
        sa.setItem('notice-id', row.id)
        app.f5()
      }, 100)

    },
    release(id) {
      sa.alert('确认发布？', () => {
        sa.ajax(PATH + "/save-or-update", {id: id, type: 'release'}, (res) => {
          this.formData = res.data
          this.dialogVisible = true
          this.dialogTitle = '编辑任务'
        }, {msg: null})
      })
    },
    del(id) {
      sa.ajax(PATH + "/del", {id: id}, (res) => {
        sa.alert(res.msg, () => {
          this.f5()
        })
      }, {})
    },
    show(row) {
      layer.open({
        title: row.title,
        type: 1,
        content: row.content,//这里content是一个普通的String
        shadeClose: true,	// 是否点击遮罩关闭
        maxmin: true, // 显示最大化按钮
        shade: 0.8,		// 遮罩透明度
        scrollbar: false,	// 屏蔽掉外层的滚动条
        moveOut: true,		// 是否可拖动到外面
        area: ['60%', '80%'],	// 大小
      });
    },
    f5() {
      sa.ajax(PATH + "/list", this.p, (res) => {
        this.tableData = res.data;
        this.p.total = res.dataCount
      }, {type: 'get'})
    }
  },
  mounted() {
  },
  created() {
    this.f5()
  }
}
</script>

<style scoped>
</style>
